<template>
	<div class="xzcc">
		<div class="IndexMinority">
		<p class="head_title">小众种草</p>
		<p class="head_desc">游侠客独一无二的旅行体验</p>
		</div>
		<div class="swiper xzcc-swiper">
				<ol class="xzcc swiper-wrapper">
						<li v-for="item in xzccList" :key="item.id" class="swiper-slide">
							<router-link to="/">
								<img :src="item.imgURL" />
								<p>{{item.title}}</p>
							</router-link>
						</li>
				</ol>
		</div>
	</div>
</template>

<script>
	import {onMounted} from 'vue';
	import Swiper ,{
		Autoplay,
		EffectCoverflow,
		EffectCube,
		Pagination,
	}from 'swiper';
	
	Swiper.use([Autoplay,EffectCoverflow,EffectCube,Pagination])
	
	export default{
		name:'Xzcc',
		data(){
			return{
			xzccList:[
				{id:1,imgURL:require('@/assets/img/xzcc1.jpg')},
				{id:2,imgURL:require('@/assets/img/xzcc2.jpg')},
				{id:3,imgURL:require('@/assets/img/xzcc3.jpg')},
				{id:4,imgURL:require('@/assets/img/xzcc4.jpg')},
				{id:5,imgURL:require('@/assets/img/xzcc5.jpg')},
				{id:6,imgURL:require('@/assets/img/xzcc6.jpg')},
			]
		}
		},setup(){
			onMounted( ()=>{ 
				new Swiper('.xzcc-swiper' ,{
					slidesPerView : 3,
				})
			})
		}}
</script>

<style scoped>
	a{
		text-decoration: none;
		color: black;
	}
	.xzcc{
		   padding: 0.3rem 0;
	}
	.IndexMinority{
		    display: flex;
		    align-items: center;
		    padding: 0 .33rem;
		    height: 0.88rem;
		    overflow: hidden
	}
	.head_title{
		    flex-shrink: 0;
		    margin-right: .29rem;
		    font-size: 0.6rem;
		    font-weight: bold;
		    color: #333;
	}
	.head_desc{
		padding: 0 .11rem;
		    height: .36rem;
		    line-height: .36rem;
		    background-color: #fff3ea;
		    font-size: .24rem;
		    color: #ff9e51;
		    box-sizing: border-box;
		    border-radius: .08rem;
		    text-overflow: ellipsis;
		    white-space: nowrap;
		    overflow: hidden;
	}
	.xzcc li{
		float: left;
		width: 25%;
		text-align: center;
	}
	.xzcc li img{
		position: relative;
		    flex-shrink: 0;
		    margin-right: 0.06rem;
		    width: 3.2rem;
		    height: 3.8rem;
		    background: #fff9db no-repeat center center/cover;
			border-top-left-radius: .16rem;
			border-bottom-left-radius: .16rem;
	}
</style>
